<template>
  <div class='main'>
    <el-row>
      <el-col :span="12">
        <logo>
        </logo>
      </el-col>
      <el-col :span="12" class="left">
        
        <span v-if='showBalance'>
          <span>欢迎光临，{{ userInfo.userName }}&nbsp;&nbsp;</span>
          <span>当前等级：{{ userLevel.levelDesc }}&nbsp;&nbsp;</span>
          您的账户余额：<span style="color:red">{{ userInfo.balance ? (userInfo.balance / 100).toFixed(2) : 0}}</span>
          <el-button type="text" class="deposit" @click="toDeposit()">金币充值>></el-button>
        </span>
        <span v-if='showSiteSwitch'>
          <el-select v-model="currentSite">
              <el-option
                v-for="site in allSites"
                :key="site.namespace"
                :label="site.namespaceDesc"
                :value="site.namespace">
              </el-option>
            </el-select>
        </span>
        <el-button type="text" @click="logout">退出登录</el-button>
      </el-col>
                <!--  -->
    </el-row>
    <!-- <el-row >
      
    </el-row> -->
  </div>
</template>

<script>
  // import {signout} from '@/api/getData'
  // import {baseImgPath} from '@/config/env'
  import {deleteCookie} from '@/utils/cookie'
  // import {mapActions, mapState} from 'vuex'
  import logo from '@/components/Logo'
  import {mapState, mapActions} from 'vuex'

  export default {
    components: {
        logo
    },
    props: {
      showBalance: {
        type: Boolean,
        default: false
      },
      showSiteSwitch: {
        type: Boolean,
        default: false
      },
    },
    data () {
      return {
        // baseImgPath
      }
    },
    created () {
  
    },
    mounted () {
      // console.log('is show balance:' + this.showBalance)
    },
    computed: {
      ...mapState(['userInfo', 'userLevel']),
      ...mapState('manage', ['allSites']),
      currentSite : {
        get () {
          return this.$store.state.manage.currentSite
        },
        async set (value) {
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          this.changeCurrentSite(value)
          loading.close()

        }
      }
    },
    methods: {
      ...mapActions('manage', ['changeCurrentSite']),
      logout () {
        deleteCookie()
        this.$router.push('/login')
      },
      toDeposit () {
        this.$router.push('points')
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '../style/mixin';
  .left {
    text-align: right;
    color: #555;
  }
  .main {
    border-bottom: #dcdcdc 1px solid;
    font-size: 14px;
    line-height: 80px;
  }
</style>
